<style lang="scss">
  .gdxx-div {
    outline: 1px dotted #cccccc;
    padding: 7px 0;
    margin-top: 7px;
    .repeat-div {
      border-bottom: 1px dotted #cccccc;
    }
    .cl-title {
      height: 36px;
      line-height: 36px;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
    }
    .form-label input {
      background-color: #ffffff !important;
      border: #ffffff !important;
      padding-left: 0px !important;
    }
    .gdxx-file {
      a {
        text-decoration: none;
        color: #308ee5;
        padding-right: 36px;
        font-size: 16px;
      }
      .file-btn {
        color: #308ee5;
        text-decoration: underline;
        padding: 0 4px;
        cursor: pointer;
        font-size: 16px;
      }
      .file-btn:hover {
        color: blue;
      }
    }
  }
  .gdlc-div {
    padding: 12px 12px !important;
    // .cl-title {
    //   border-bottom: 1px solid #308ee5;
    // }
    .el-timeline {
      margin-top: 12px;
      .el-timeline-item {
        padding-bottom: 12px;
        .el-timeline-item__node--large {
          left: -8px;
          width: 24px;
          height: 24px;
        }
        .el-timeline-item__timestamp.is-top {
          height: 32px;
          line-height: 32px;
          margin-bottom: 0;
          padding-top: 0;
        }
      }
      .el-timeline-item__content {
        .gdlc-state {
          font-size: 16px;
          font-weight: bold;
        }
        .gdlc-clr {
          color: #444444;
        }
        p {
          margin-top: 4px;
          font-size: 14px;
          text-decoration: underline;
        }
      }
    }
  }
</style>

<template>
  <el-row :gutter="10">
    <el-col :span="18">
      <el-form :model="formItemData"
               ref="formItemData"
               label-width="120px"
               v-loading="loadingPage">
        <!-- 公众信箱-公众工单 -->
        <div class="gdxx-div"
             v-if="showGzxxDiv">
          <div class="repeat-div"
               v-for="item in formItemData.gdInfoEntityList"
               :key="item.code">
            <el-row>
              <el-col :span="11">
                <el-form-item label="工单编号：">
                  <p size="small"
                     disabled>{{item.code}}</p>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="来电(信)人：">
                  <p size="small"
                     disabled>{{item.income}}</p>
                  <!-- <el-input size="small" :disabled="true" :value="item.income" ></el-input> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="联系人电话：">
                  <p size="small"
                     disabled>{{item.telphone}}</p>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="联系人邮箱：">
                  <p size="small"
                     disabled>{{item.email}}</p>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-row>
            <el-col :span="22">
              <el-form-item label="系统来源：">
                <p size="small"
                   disabled>{{formItemData.sourceName}}</p>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="信件标题：">
                <p size="small"
                   disabled>{{formItemData.gdInfoEntityList[0].title}}</p>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="信件内容：">
                <p size="small"
                   disabled>{{formItemData.gdInfoEntityList[0].content}}</p>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="转办说明：">
                <p size="small"
                   disabled>{{formItemData.gdInfoEntityList[0].instruction}}</p>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 大联动-事件工单 -->
        <div class="gdxx-div"
             v-if="showDldDiv">
          <div class="repeat-div"
               v-for="item in formItemData.gdInfoEntityList"
               :key="item.code">
            <el-row>
              <el-col :span="11">
                <el-form-item label="工单编号：">
                  <p size="small"
                     disabled>{{item.code}}</p>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="来电(信)人：">
                  <p size="small"
                     disabled>{{item.income}}</p>
                  <!-- <el-input size="small" :disabled="true" :value="item.income" ></el-input> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="联系人电话：">
                  <p size="small"
                     disabled>{{item.telphone}}</p>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="联系人邮箱：">
                  <p size="small"
                     disabled>{{item.email}}</p>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-row>
            <el-col :span="22">
              <el-form-item label="系统来源：">
                <p size="small"
                   disabled>{{formItemData.sourceName}}</p>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="内容：">
                <p size="small"
                   disabled>{{formItemData.gdInfoEntityList[0].content}}</p>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="办理要求：">
                <p size="small"
                   disabled>{{formItemData.gdInfoEntityList[0].instruction}}</p>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 市长信箱-电话工单\信件工单\信箱工单 -->
        <div class="gdxx-div"
             v-if="showSzxxDiv">
          <div class="repeat-div"
               v-for="item in formItemData.gdInfoEntityList"
               :key="item.code">
            <el-row>
              <el-col :span="11">
                <el-form-item label="工单编号：">
                  <p size="small"
                     disabled>{{item.code}}</p>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="来电(信)人：">
                  <p size="small"
                     disabled>{{item.income}}</p>
                  <!-- <el-input size="small" :disabled="true" :value="item.income" ></el-input> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="联系人电话：">
                  <p size="small"
                     disabled>{{item.telphone}}</p>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="联系人邮箱：">
                  <p size="small"
                     disabled>{{item.email}}</p>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-row>
            <el-col :span="22">
              <el-form-item label="系统来源：">
                <p size="small"
                   disabled>{{formItemData.sourceName}}</p>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="主题：">
                <p size="small"
                   disabled>{{formItemData.gdInfoEntityList[0].title}}</p>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="内容：">
                <p size="small"
                   disabled>{{formItemData.gdInfoEntityList[0].content}}</p>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 企业服务网 -->
        <div class="gdxx-div"
             v-if="showQyffDiv">
          <div class="repeat-div"
               v-for="item in formItemData.gdInfoEntityList"
               :key="item.code">
            <el-row>
              <el-col :span="11">
                <el-form-item label="工单编号：">
                  <p size="small"
                     disabled>{{item.code}}</p>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="来电(信)人：">
                  <p size="small"
                     disabled>{{item.income}}</p>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="联系人电话：">
                  <p size="small"
                     disabled>{{item.telphone}}</p>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="联系人邮箱：">
                  <p size="small">{{item.email}}</p>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-row>
            <el-col :span="22">
              <el-form-item label="系统来源：">
                <p size="small">{{formItemData.sourceName}}</p>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="主题：">
                <p size="small">{{formItemData.gdInfoEntityList[0].title}}</p>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="内容：">
                <p size="small"
                   class="p-qiye-content"
                   v-html="formItemData.gdInfoEntityList[0].content"></p>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 市人社局信箱 -->
        <div class="gdxx-div"
             v-if="showSrsjDiv">
          <div class="repeat-div"
               v-for="item in formItemData.gdInfoEntityList"
               :key="item.code">
            <el-row>
              <el-col :span="10"
                      :offset="1">
                <el-form-item label="工单编号：">
                  <p size="small"
                     disabled>{{item.code}}</p>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="来电(信)人：">
                  <p size="small"
                     disabled>{{item.income}}</p>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10"
                      :offset="1">
                <el-form-item label="联系人电话：">
                  <p size="small"
                     disabled>{{item.telphone}}</p>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="联系人邮箱：">
                  <p size="small">{{item.email}}</p>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-row>
            <el-col :span="20"
                    :offset="1">
              <el-form-item label="系统来源：">
                <p size="small">{{formItemData.sourceName}}</p>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20"
                    :offset="1">
              <el-form-item label="主题：">
                <p size="small">{{formItemData.gdInfoEntityList[0].title}}</p>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20"
                    :offset="1">
              <el-form-item label="内容：">
                <p size="small"
                   class="p-qiye-content"
                   v-html="formItemData.gdInfoEntityList[0].content"></p>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 人民网信访 -->
        <div class="gdxx-div"
             v-if="showRmwDiv">
          <div class="repeat-div"
               v-for="item in formItemData.gdInfoEntityList"
               :key="item.code">
            <el-row>
              <el-col :span="10"
                      :offset="1">
                <el-form-item label="工单编号：">
                  <p size="small"
                     disabled>{{item.code}}</p>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="来电(信)人：">
                  <p size="small"
                     disabled>{{item.income}}</p>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10"
                      :offset="1">
                <el-form-item label="联系人电话：">
                  <p size="small"
                     disabled>{{item.telphone}}</p>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="联系人邮箱：">
                  <p size="small">{{item.email}}</p>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-row>
            <el-col :span="20"
                    :offset="1">
              <el-form-item label="系统来源：">
                <p size="small">{{formItemData.sourceName}}</p>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20"
                    :offset="1">
              <el-form-item label="主题：">
                <p size="small">{{formItemData.gdInfoEntityList[0].title}}</p>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20"
                    :offset="1">
              <el-form-item label="内容：">
                <p size="small"
                   class="p-qiye-content"
                   v-html="formItemData.gdInfoEntityList[0].content"></p>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 工单附件 -->
        <div class="gdxx-div"
             v-if="showFileDiv">
          <p class="cl-title">工单文件</p>
          <el-row class="gdxx-file">
            <el-col :span="22">
              <el-form-item label="文件：">
                <!-- formItemData.fileEntity.filePath -->
                <a href="javascript:void(0)">{{formItemData.fileEntity.fileName}}</a>
                <span class="file-btn"
                      @click="filePreview">查看</span>
                <span class="file-btn"
                      @click="fileDownload">下载</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 流程信息 -->
        <!-- <div class="gdxx-div" v-if="showLcxxDiv">
          <p class="cl-title">处理流程</p>
          <el-row v-for="item in formItemData.gdHisEntityList" :key="item.wllzid">
            <el-col :span="22">
              <el-form-item label="流程：">
                <el-input type="textarea" autosize rows="99" size="small" :disabled="true"
                  :value=" '(' + item.deptName + ')' + item.empName + '在' + item.replyTime + ' ' + item.replyState + '：' + item.replyDescription" resize="none"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div> -->

        <!-- 处理信息 -->
        <div class="gdxx-div"
             v-if="showClxxDiv">
          <p class="cl-title">处理信息</p>
          <!-- <el-row>
            <el-col :span="5"
                    :offset="1">
              <el-form-item label="紧急件：">
                <el-switch active-color="red"
                           inactive-color="lightgray"
                           v-model="formItemData.isImportant"
                           disabled></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="工单类别：">
                <el-input size="small"
                          :disabled="true"
                          :value="formItemData.cateName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="执行处室：">
                <el-input size="small"
                          :disabled="true"
                          :value="formItemData.deptName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="处理时限：">
                <el-input size="small"
                          :disabled="true"
                          :value="formItemData.limitTime"></el-input>
              </el-form-item>
            </el-col>
          </el-row> -->
          <el-row>
            <el-col :span="5">
              <el-form-item label="紧急件：">
                <el-switch active-color="red"
                           inactive-color="lightgray"
                           v-model="formItemData.isImportant"
                           disabled></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="工单类别：">
                <p size="small"
                   disabled>{{formItemData.cateName}}</p>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="执行处室：">
                <p size="small"
                   disabled>{{formItemData.deptName}}</p>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="处理时限：">
                <p size="small"
                   disabled>{{formItemData.limitTime}}</p>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="备注：">
                <p size="small"
                   disabled>{{formItemData.gdInfoEntityList[0].remark ? formItemData.gdInfoEntityList[0].remark : '无'}}</p>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="gdxx-div"
             v-if="showHfxxDiv">
          <p class="cl-title">回复信息</p>
          <div v-if="showThxxDiv">
            <el-row>
              <el-col :span="22">
                <el-form-item label="回复人/时间：">
                  <p size="small"
                     disabled>{{formItemData.empName}} 在 {{formItemData.handleTime}} 退回 </p>
                  <!-- <el-input size="small" :disabled="true" :value=" formItemData.empName + ' 在 ' + formItemData.handleTime + ' 退回' " ></el-input> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item label="退回原因：">
                  <p size="small"
                     disabled>{{formItemData.handleDescription}}</p>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div v-if="showBlxxDiv">
            <el-row>
              <el-col :span="22">
                <el-form-item label="回复人/时间：">
                  <p size="small"
                     disabled>{{formItemData.empName}} 在 {{formItemData.handleTime}}  <span v-if="formItemData.handleType">{{formItemData.handleType}}</span> <span v-else>回复</span> </p>
                  <!-- <el-input size="small" :disabled="true" :value=" formItemData.empName + ' 在 ' + formItemData.handleTime + ' 回复' " ></el-input> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item label="回复内容：">
                  <p size="small"
                     disabled>{{formItemData.handleDescription}}</p>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
    </el-col>
    <el-col :span="6">
      <div class="gdxx-div gdlc-div"
           v-if="showLcxxDiv">
        <p class="cl-title">流程信息</p>
        <el-timeline>
          <el-timeline-item v-for="(item, index) in formItemData.gdProgressEntityList"
                            :key="index"
                            :timestamp="item.proDate"
                            placement="top"
                            :icon="item.icon"
                            size="large"
                            :type="item.type">
            <div>
              <span class="gdlc-state">{{item.stateString}} </span>
              <span class="gdlc-clr">{{item.handleName}} ({{item.deptName}}) </span>
            </div>
            <p>{{item.description}}</p>
          </el-timeline-item>
          <!-- <el-timeline-item timestamp="2018年4月12日 13时32分" placement="top" icon="el-icon-edit-outline" size="large" type="default">
            <h4>综合处 陈雨雁 创建</h4>
            <p></p>
          </el-timeline-item> -->
        </el-timeline>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    name: 'synthesize-detail',
    props: ['wllzid'],
    data () {
      return {
        loadingPage: false,
        // 表单数据
        formItemData: {
          sourceName: '',
          isImportant: false,
          isUnsatisfy: false,
          limitTime: '',
          deptName: '',
          cateName: '',
          fileEntity: {
            fileName: '',
            filePath: ''
          },
          gdHisEntityList: [
            {
              deptName: '',
              empName: '',
              replyState: '',
              replyTime: '',
              replyDescription: ''
            }
          ],
          gdInfoEntityList: [
            {
              code: '',
              income: '',
              telphone: '',
              email: '',
              remark: ''
            }
          ]
        },
        // div显示隐藏
        showGzxxDiv: false,
        showDldDiv: false,
        showSzxxDiv: false,
        showQyffDiv: false,
        showSrsjDiv: false,
        showRmwDiv: false,
        showFileDiv: false,
        showLcxxDiv: false,
        showClxxDiv: false,
        showHfxxDiv: false,
        showThxxDiv: false,
        showBlxxDiv: false
      }
    },
    methods: {
      detailFn: function () {
        const _this = this
        // 请求，解析内容
        _this.loadingPage = true
        this.$axios.get(_this.$api.query.info + '/' + _this.wllzid).then(rs => {
          if (rs) {
            _this.formItemData = Object.assign(_this.formItemData, rs)
            _this.formItemData.limitTime = this.formatLimitDate(rs)
            _this.formItemData.handleTime = this.formatHandleDate(rs)
            // 判断工单文件
            if (rs.document === 1) {
              _this.showFileDiv = true
            }

            // 判断来源系统
            if (rs.sourceId == 12306) {
              _this.showSrsjDiv = true
            } else if (rs.sourceId == 12388) {
              _this.showRmwDiv = true
            } else if (rs.sourceId == 10086) {
              _this.showGzxxDiv = true
            } else if (rs.sourceId == 10010) {
              _this.showDldDiv = true
            } else if (rs.sourceId == 10000) {
              _this.showSzxxDiv = true
            } else if (rs.sourceId == 12580) {
              _this.showQyffDiv = true
            }

            // 判断处理状态
            if (rs.handleState === 5) {
              _this.showThxxDiv = true
              _this.showHfxxDiv = true
            } else if (rs.handleState === 4) {
              _this.showBlxxDiv = true
              _this.showHfxxDiv = true
            }
            _this.showLcxxDiv = true
            _this.showClxxDiv = true
            _this.loadingPage = false
          }
        })
      },
      // 格式化日期
      formatLimitDate: function (data) {
        const _this = this
        var date = data.limitTime
        if (date === undefined) {
          return ''
        }
        return _this.$moment(date).format('YYYY年MM月DD日')
      },
      formatHandleDate: function (data) {
        const _this = this
        var date = data.handleTime
        if (date === undefined) {
          return ''
        }
        return _this.$moment(date).format('YYYY年MM月DD日HH时mm分ss秒')
      },
      // 文件预览
      filePreview () {
        let fileUrl = this.formItemData.fileEntity.filePath
        // fileUrl = fileUrl.replace('http://192.168.39.4:90', '')
        // window.open(this.formItemData.fileEntity.filePreview + encodeURIComponent(fileUrl))
        this.$previewFile(fileUrl)
      },
      // 文件下载
      fileDownload () {
        let fileUrl = this.formItemData.fileEntity.filePath
        let fileName = this.formItemData.fileEntity.fileName
        // fileUrl = fileUrl.replace('http://192.168.39.4:90', 'http://222.210.127.164:90')
        // window.open(fileUrl)
        this.$downloadFile(fileUrl, fileName)
      }
    },
    created: function () {
      this.detailFn()
    }
  }
</script>
